import React, { useEffect, useState } from 'react'
import style from './Index.module.less'
import { getListRequest } from './ajax'
import { awaitWrap, limitStr } from '@src/assets/js/tool'
import Common from '@src/assets/js/common'
import { Skeleton } from 'antd'

async function initList (setList, setLoading) {
  setLoading(true)
  const [e, d] = await awaitWrap(getListRequest({
    condition: JSON.stringify([{ k: 'visible_type', o: '=', v: '司法厅' }]),
    page_size: 3
  }))
  setLoading(false)
  if (e === null && d !== null) {
    setList(d.list)
  }
}

function Main () {
  const [list, setList] = useState([])
  const [loading, setLoading] = useState(false)
  const common = new Common()
  useEffect(() => {
    initList(setList, setLoading)
  }, [])
  if (loading) {
    return (
      <div className={style.loading}>
        <Skeleton active title={1} paragraph={0} />
      </div>
    )
  }
  return (
    <div className={style.container}>
      <span className={style.body}>
        <span className={style.label}>公函：</span>
        {
          list.map((li, i) => {
            return (
              <span key={i} className={style.item}>
                <span>{i + 1}、</span>
                <a onClick={() => {
                  common.$openPage({ id: `gonghan-detail-${li.id}`, title: `公函详情：${limitStr(li.title, 10)}`, componentName: 'GonghanDetail', meta: { id: li.id, title: li.title } })
                }}
                >{li.title}
                </a>
              </span>
            )
          })
        }
        {
          list.length === 0 && <span className={style.empty}>无</span>
        }
      </span>
      <a
        className={style.more} onClick={() => {
          common.$openPage({ id: 'GonghanManager', title: '公函管理', componentName: 'GonghanManager', meta: { } })
        }}
      >更多 &gt;
      </a>
    </div>
  )
}

export default Main
